<!-- 黑名单详情 -->
<template>
  <div id="NewFriendInfo">
    <Head title="" BackType1="1" :NoticeType2="personStatus===1" @PointClick="personInfoOption"></Head>
    <div id="NewFriendInfoMain">
        <div class="boundary"></div>
        <div id="InfoMain">
        <div class="InfoName">
          <img class="NameImg" src="../assets/img/messageAvatar.png" alt="">
          <div class="InfoNameRight">
            <div class="NameBox">
              <div class="Name">爱萝莉了</div>
              <img src="@/assets/img/Man.png" v-if="gender" alt="">
              <img src="@/assets/img/Woman.png" v-if="!gender" alt="">
            </div>
            <div class="Account">账号：158790186465</div>
          </div>
        </div>
        <div class="Region">
          <div class="InfoTitle">地区</div>
          <div class="InfoText">湖南长沙</div>
        </div>
      </div>
      <div id="Note" @click="bindToEditorsNote">
        <div class="NoteTitle">设置备注</div>
        <img src="@/assets/img/ArrowRight.png" alt="">
      </div>
      <div id="Describe" class="MainBox">
        <div class="InfoTitle">个人描述</div>
        <div class="InfoText">毕竟几人真得鹿，不知终日梦为鱼毕竟几人真得鹿，不知终日梦为鱼</div>
      </div>
      <div id="Photo">
        <div class="PhotoTitle">个人相册</div>
        <div class="PhotoMain" v-show="Photo">
          <div class="PhotoList">
            <img v-for="(Phone,index) in phones" :key="index" src="../assets/img/messageAvatar.png" alt="">
          </div>
          <img id="PhotoMore" v-show="PhotoMore" src="@/assets/img/ArrowRight.png" alt="">
        </div>
        <div class="NoPhoto" v-show="!Photo">暂无相册</div>
      </div>
      <div id="source" class="MainBox" v-if="personStatus===2">
        <div class="InfoTitle">来源</div>
        <div class="InfoText col9">毕竟几人真得鹿，不知终日梦为鱼</div>
      </div>
      <button id="button" v-if="personStatus!==1">{{personStatus===2?'通过验证':'添加到通讯录'}}</button>
    </div>

      <!--发送消息 已添加好友-->
      <button class="sendData" v-if="personStatus===1" @click="bindSendData">
        发消息
      </button>
      <van-actionsheet
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          @select="onSelect"
          @cancel="onCancel"
      />
  </div>
</template>

<script>
import Head from '@/components/Head';
import { Actionsheet } from 'vant';
export default {
  data(){
    return{
      gender:false,
      Photo:true,
      PhotoMore:true,
      phones:[
        {src:require('@/assets/img/Man.png'),index:1},
        {src:require('@/assets/img/Man.png'),index:2},
        {src:require('@/assets/img/Man.png'),index:3},
        {src:require('@/assets/img/Man.png'),index:4},
      ],
        personStatus:1,  //0未加好友  1已加好友  2等待验证
        show:false,
        actions: [
            {
                name: '发送名片',
                className:"sendCard",
                path:"/selectcard"
            },
            {
                name: '加入黑名单',
                className:"joinBlackList"
            },
            {
                name: '删除联系人',
                className:"joinBlackList"
            }
        ]
    }
  },
  components:{
    Head,
    [Actionsheet.name]:Actionsheet
  },
  methods:{
      bindSendData(){

      },
      personInfoOption(){
          this.show = !this.show
      },
      onSelect(item){
          this.show = false;
          this.$router.push(item.path)
      },
      onCancel(){

      },
      bindToEditorsNote(){
          this.$router.push('/editorsnote');
      }
  }

}
</script>

<style scoped lang='less'>
  #NewFriendInfo{
      position: relative;
      width: 100%;
      height: 100%;
    font-size: 28px;
      background-color: #f1f5f8;
    .boundary {
        width: 100%;
        height: 12px;
        background-color: #ffffff;
    }
    #NewFriendInfoMain{
      position: absolute;
      top: 88px;
      bottom: 0;
      overflow: scroll;
      z-index: 10;
      #InfoMain{
        background: #fff;
        padding-left: 30px;
        .InfoName{
          border-bottom: 1px solid #e2e2e2;
          display: flex;
          flex-direction: row;
          min-height: 210px;
          .NameImg{
            width: 128px;
            height: 128px;
            margin-left: 20px;
              border-radius: 10px;

          }
          .InfoNameRight{
            padding-left: 42px;
            .NameBox{
              width: 500px;
              display: flex;
              flex-direction: row;
              padding-right: 30px;
              .Name{
                font-size: 42px;
                max-width: 430px;
                line-height: 50px;
                color: #000;
                font-family: PingFangSC-Medium;
              }
              img{
                padding:7px 0 7px 34px;
                width: 36px;
                height: 36px;
              }
            }
            .Account{
              margin-top: 26px;
              font-size: 28px;
              margin-bottom: 30px;
              width: 500px;
              color: #999;
            }
          }
        }
        .Region{
          padding-right: 30px;
          width: 690px;
          background: #fff;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding:20px 30px 20px 0;
          min-height: 50px;
          .InfoTitle{
            width: 130px;
          }
          .InfoText{
            line-height: 40px;
            width: 560px;
          }
        }
      }
      #Note{
        padding: 0 30px;
        height: 90px;
        background: #fff;
        margin-top: 10px;
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .NoteTitle{
          width: 120px;
        }
        img{
          width: 20px;
          height: 32px;

        }
      }
      .MainBox{
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding:20px 30px;
        min-height: 50px;
        margin-top: 10px;
        width: 690px;
        .InfoTitle{
          width: 130px;
        }
        .InfoText{
          line-height: 40px;
          width: 560px;
        }
        .col9{
          color: #999;
        }
      }
      #Photo{
        padding:0 30px;
        margin-top: 10px;
        min-height: 90px;
        background: #fff;
        display: flex;
        align-items: center;
        flex-direction: row;
        .PhotoTitle{
          width: 130px;
          max-height: 180px;
        }
        .PhotoMain{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 560px;
          .PhotoList{
            display: flex;
            flex-wrap: wrap;
            width: 520px;
            justify-content: start;
            height: 140px;
            overflow: hidden;
            padding: 20px 0;
            img{
              width: 110px;
              height: 110px;
              margin: 15px 9px;
              border-radius: 10px;

            }
          }
          #PhotoMore{
            width: 20px;
            height: 32px;
          }
        }
        .NoPhoto{
          color: #999;
        }
      }
      #button{
        margin: 120px 35px;
        width: 680px;
        height: 90px;
        border-radius: 10px;
        background: #627df1;
        font-size: 32px;
        color: #fff;
        &:hover{
          background: #4868f2;
        }
      }
    }
      .sendData {
          position: fixed;
          z-index: 99;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 90px;
          background-color: #627df1;
          text-align: center;
          line-height: 90px;
          font-size:32px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
      }
      .sendCard {
          height:115px;
          span {
              font-size:40px;
              font-family:PingFangSC-Regular;
              font-weight:400;
              color:rgba(0,122,255,1);
              line-height:115px;
          }
      }
      .joinBlackList {
          height:115px;
          font-size:40px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,59,48,1);
          line-height:115px;
      }

      .van-actionsheet__cancel {
          font-size:40px;
          font-family:PingFangSC-Medium;
          font-weight:500;
          color:rgba(0,122,255,1);
      }


  }
</style>
